<template>
  <el-card>
    <p v-if="username">用户名：{{ username }}</p>
    <el-form v-else>
      <el-form-item label="用户名">
        <el-input v-model="inputUsername" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确定</el-button>
      </el-form-item>
    </el-form>

    <div class="room">
      <template v-for="(msg, index) in messageList" :key="index">
        <div class="other-message" v-if="msg.username !== username">
          <div class="title">
            {{ msg.username }}: {{ dayjs(msg.timestamp).format("HH:mm:ss") }}
          </div>
          <div class="content">
            {{ msg.content }}
          </div>
        </div>
        <div class="my-message" v-else>
          <div class="title">
            我: {{ dayjs(msg.timestamp).format("HH:mm:ss") }}
          </div>
          <div class="content">
            {{ msg.content }}
          </div>
        </div>
      </template>
    </div>

    <div class="message-box">
      <el-input type="textarea" :rows="4" v-model="message"></el-input>
      <el-button
        type="primary"
        @click="sendMessage"
        size="small"
        class="btn"
        :disabled="!message || !username"
      >
        发送
      </el-button>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "App",
});
import { ref } from "vue";
import dayjs from "dayjs";

const inputUsername = ref("");
const username = ref("");

const submit = () => {
  username.value = inputUsername.value;
  inputUsername.value = "";
};

const message = ref("");

// 1. 连接上 WebSocket 服务器
// const ws = new WebSocket("ws://localhost:8080");
const ws = new WebSocket("ws://192.168.52.44:8080");

interface IMessage {
  content: string;
  timestamp: number;
  username: string;
}

// 2. 点击按钮，发送消息
const sendMessage = () => {
  const data: IMessage = {
    content: message.value,
    timestamp: Date.now(),
    username: username.value,
  };
  ws.send(JSON.stringify(data));
  message.value = "";
};

const messageList = ref<IMessage[]>([]);

// 3. 接受消息
ws.onmessage = function (e) {
  const data = JSON.parse(e.data);
  messageList.value.push(data);
};
</script>

<style scoped>
.room {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  border: 1px solid #e9eef2;
}

.message-box {
  position: relative;
  margin-top: 20px;
}

.btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.title {
  font-size: 12px;
  color: #62778c;
  margin-bottom: 5px;
  height: 18px;
}

.content {
  padding: 10px 8px;
  background-color: #eff3f6;
  color: #28334b;
  border-radius: 4px;
  max-width: 90%;
  font-size: 14px;
  word-break: break-word;
  word-wrap: break-word;
  margin-bottom: 10px;
  display: inline-block;
}

.my-message .content {
  color: #fff;
  background-color: #1f8ce8;
}

.my-message {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>
